<template>
  <view class="home-detail-container">
    <!-- Banner图 -->
    <swiper class="swiper-box" indicator-dots autoplay circular>
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in swiperList"
        :key="index"
      >
        <image class="swiper-item-image" :src="item" />
      </swiper-item>
    </swiper>
    <!-- 主体部分 -->
    <view class="main-content">
      <!--  验证图标部分-->
      <view class="verify-box">
        <image class="verify-icon" :src="IconVerify"></image>
        <text class="verify-text">已实名验证</text>
      </view>
      <!-- 标题 -->
      <text class="title-box">环球购物广场附近卡罗尔花园 1间双人房出租</text>
      <!-- 价格标题 -->
      <view class="price-box">
        <text class="price-num">$800</text>
        <text class="price-month">每月</text>
        <text class="price-money">($700押金)</text>
      </view>
      <!-- 简介 -->
      <view class="configuration-box">
        <view
          v-for="(item, index) in configurationList"
          :key="index"
          class="configuration-Icom-box"
        >
          <image :src="item.icon"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 房东个人资料 -->
    <view class="profile-info-box">
      <!-- 左边头像部分 -->
      <view class="main-content-box">
        <image
          class="avator-image"
          src="https://pic2.zhimg.com/v2-ab5998b2315433a05a2cc58877f651e8_is.jpg?imageView2/1/w/80/h/80"
        />
        <!-- name和icon -->
        <view class="username-box">
          <view class="top-box">
            <text>Montserrat-Medium</text>
            <image class="verify-icon" :src="IconVerify"></image>
          </view>
          <!-- 年龄和身份 -->
          <view class="age-box">
            <image :src="Boy" class="box-icon" />
            <text class="num">36</text>
            <text class="landlord">房东</text>
          </view>
        </view>
      </view>
      <!-- 右边more部分 -->
      <image class="more-icon" :src="moreIcon" mode="scaleToFill" />
    </view>

    <!--  详情内容 title 默认传值 :detail 传递对象-->
    <!-- 组件主要内容 -->
    <LabelInfo title="租期" :detail="detail"> </LabelInfo>
    <LabelInfo title="寻找" :detail="detail2"> </LabelInfo>
    <LabelInfo title="描述" :detail="detail3"> </LabelInfo>
    <!-- 组件 复用icon-->
    <IconClaim :icon-list="iconList" :count="8"></IconClaim>
    <IconClaim :icon-list="iconList2" :title="'要求'"></IconClaim>
    <LabelInfo title="地址" :detail="address"> </LabelInfo>
    <!-- 地图组件 -->
    <DetailMap :options="{ longitude: 113.427923, latitude: 23.129499 }" />

    <!-- 1、评论部分 -->
    <view class="comment-box">
      <view class="title">
        <text>评论</text>
      </view>
      <!--2、 主体内容部分 -->
      <view class="main-box">
        <!-- 头像 -->
        <image
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F17%2F20210717232533_2edcf.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664380751&t=d82fc344147ff18a437c15fcbb7c2903"
          mode="scaleToFill"
          class="avator"
        />
        <!-- 文字 -->
        <view class="text-box">
          <text class="name">Grace Thornton</text>
          <text class="details">最近租客</text>
        </view>
        <!-- 图标 -->
        <image :src="IconVerify" mode="scaleToFill" class="verify-icon" />
      </view>
      <!--3、 评论部分  -->
      <view class="good">
        很棒的位置，非常干净，适合我们两个父母的家庭和两个成年的孩子和他们的伙伴。我们没有使用任何危害身体健康的墙漆，空气很清新的…
      </view>
    </view>

    <!-- 推荐部分 -->
    <view class="recommend-box">
      <view class="title"> 相似推荐 </view>
    </view>
  </view>
</template>
<script>
//组件
import LabelInfo from "./components/label-info.vue";
import IconClaim from "./components/icon-claim.vue";
import DetailMap from "./components/map.vue";
// icon 图标

export default {
  components: { LabelInfo, IconClaim, DetailMap },
  name: "Detail",
  data() {
    return {
      iconList: [
        {
          icon: "http://cdn.lengnuanit.top/stacy/detail/ic_washing.png",
        },
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_router@2x.png",
        },
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_armchair@2x.png",
        },
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_elevator@2x.png",
        },
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_radiator@2x.png",
        },
      ],
      iconList2: [
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_no_drinks@2x.png",
        },
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_marijuana@2x.png",
        },
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_dog@2x.png",
        },
        {
          icon: "http://cdn.lengnuanit.top/stacy/home/ic_couple@2x.png",
        },
      ],
      detail: {
        txtOne: "6月1日, 2018",
        txtTwo: "最少租期1年",
        txtThree: "",
      },
      detail2: {
        txtOne: "以下条件租客",
        txtTwo: "男性或女性在 24-32岁 之间",
        txtThree: "",
      },
      detail3: {
        txtOne: "空间：",
        txtTwo: " - ",
        txtThree:
          "位于布鲁克林区市中心的新豪华高层建筑。双房，朝南，建筑面积为60平方米，小区电梯房。地理位置方便，直接在杰伊街地铁科技地铁站与…",
      },
      address: {
        txtThree: "西部林街，布鲁克林区，纽约市",
      },

      height: 0,
      swiperList: [
        "https://picx.zhimg.com/80/v2-ef423ddd91068e19c936b34c94d7b5d1_1440w.jpg?source=1940ef5c",
        "https://picx.zhimg.com/80/v2-ef423ddd91068e19c936b34c94d7b5d1_1440w.jpg?source=1940ef5c",
        "https://picx.zhimg.com/80/v2-ef423ddd91068e19c936b34c94d7b5d1_1440w.jpg?source=1940ef5c",
        "https://picx.zhimg.com/80/v2-ef423ddd91068e19c936b34c94d7b5d1_1440w.jpg?source=1940ef5c",
        "https://picx.zhimg.com/80/v2-ef423ddd91068e19c936b34c94d7b5d1_1440w.jpg?source=1940ef5c",
      ],
      IconVerify:"http://cdn.lengnuanit.top/stacy/icon/verified-icon.png", //icon图标
      Boy:"http://cdn.lengnuanit.top/stacy/icon/boy-icon.png", //icon图标
      moreIcon:"http://cdn.lengnuanit.top/stacy/icon/more-icon.png",
      configurationList: [
        { icon: "http://cdn.lengnuanit.top/stacy/detail/ic_roommate.png", name: "最多2人租" },
        { icon: "http://cdn.lengnuanit.top/stacy/detail/ic_bed.png", name: "2个床" },
        { icon: "http://cdn.lengnuanit.top/stacy/detail/ic_bedroom.png", name: "2间卧室" },
        { icon: "http://cdn.lengnuanit.top/stacy/detail/ic_shower.png", name: "1间浴室" },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.home-detail-container {
  .swiper-box {
    width: 100%;
    .swiper-item {
      width: 100%;

      image {
        width: 100%;
      }
    }
  }
  .main-content {
    box-sizing: border-box;
    width: 100%;
    padding: 0 40rpx;
    .verify-box {
      display: flex;
      align-items: center;
      margin: 40rpx 0;
      image {
        width: 24rpx;
        height: 28rpx;
      }
      .verify-text {
        margin-left: 40rpx;
        font-size: 20rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #08c299;
      }
    }
    .title-box {
      margin-bottom: 48rpx;

      font-size: 48rpx;
      font-family: PingFang;
      font-weight: bold;
      color: #020433;
    }
    .price-box {
      display: flex;
      align-items: center;
      margin-top: 48rpx;
      .price-num {
        font-size: 48rpx;
        font-family: Montserrat;
        font-weight: bold;
        color: #020433;
      }
      .price-month {
        font-size: 28rpx;
        font-family: PingFang;
        font-weight: 500;
        color: #020433;
        margin-left: 14rpx;
      }
      .price-money {
        margin-left: 14rpx;
        font-size: 28rpx;
        font-family: PingFang;
        font-weight: 500;
        color: #404b69;
      }
    }
    .configuration-box {
      margin-top: 48rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .configuration-Icom-box {
        padding: 10rpx 0;
        width: 40%;
        image {
          width: 26rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
  .profile-info-box {
    margin-top: 48rpx;
    width: 100%;
    height: 176rpx;
    background: #f7f9ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    box-sizing: border-box;
    .main-content-box {
      display: flex;
      .avator-image {
        border-radius: 50%;
        width: 112rpx;
        height: 112rpx;
      }
      .username-box {
        margin-left: 30rpx;
        flex: 1;
        .top-box,
        .age-box {
          display: flex;
          align-items: center;
          text {
            font-size: 32rpx;
            font-family: Montserrat;
            font-weight: 500;
            color: #020433;
          }
          image {
            margin-left: 15rpx;
            width: 24rpx;
            height: 28rpx;
          }
        }
        .age-box {
          margin-top: 14rpx;
          image {
            margin-left: 0;
          }
          .num {
            margin-left: 11rpx;
          }
          .landlord {
            margin-left: 45rpx;
          }
        }
      }
    }
    .more-icon {
      width: 32rpx;
      height: 8rpx;
    }
  }
  .comment-box {
    margin-top: 70rpx;
    padding: 0 40rpx;
    border-bottom: 2px solid #f0f0f0;
    .title {
      width: 70rpx;
      height: 34rpx;
      font-size: 36rpx;
      font-family: PingFang;
      font-weight: bold;
      margin-bottom: 52rpx;
      color: #020433;
    }
    .main-box {
      display: flex;
      align-items: center;
      .avator {
        width: 80rpx;
        height: 80rpx;
        margin-right: 32rpx;
        border-radius: 50%;
      }
      .text-box {
        display: flex;
        flex-direction: column;
        .name {
          margin-bottom: 20rpx;
        }
      }
      .verify-icon {
        width: 24rpx;
        height: 28rpx;
        margin-left: 40rpx;
        padding-bottom: 60rpx;
        font-size: 20rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #08c299;
      }
    }
    .good {
      margin: 38rpx 0 61rpx 0;
    }
  }
  .recommend-box {
    margin-top: 70rpx;
    padding: 0 40rpx;
    border-bottom: 2rpx solid #f0f0f0;
    .title {
      width: 141rpx;
      height: 34rpx;
      font-size: 36rpx;
      font-family: PingFang;
      font-weight: bold;
      color: #020433;
    }
  }
}
</style>
